<template>
    <div>
		<p style="font-size:0.24rem;padding:0;margin:0;margin-top:0.24rem">所有收货地址</p>
        <div v-if="list&&list.length>0">
            <div class="cart" v-for="(i,index) in list" :key='index'>
                <span class="name">{{i.name}}</span>
                <span class="phone">{{i.phone}}</span>
                <span class="dress">{{i.province+i.city+i.detail}}</span>
                <span  class="bj" @click="bj(i)">编辑</span>
                <span class="cardel" @click="del(i)"></span>
            </div>
        </div>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import Bus from './bus.vue'
export default {
    data(){
        return {
            list:[]
        }
    },
    computed: {
    ...mapGetters(['login',"uid"])
    },
    activated() {
         this.axios({
            url: `${this.$config.dataUrl}/users/address/${this.uid}`
          }).then(res=>{
              this.list=res.data.data;
          })
    },
    methods: {
        bj(i){
            Bus.$emit("bj",i);
        },
        del(e){
            var id=e.id
            if(confirm("您确定要删除吗")){
                this.axios({
                    url:`${this.$config.dataUrl}/users/address`,
                    params:{id:id},
                    method:'delete'
                }).then(res=>{
                    this.list.map((element,index)=>{
                        if(element.id==id){
                           console.log(element,index)
                           this.list.splice(index,1)
                       }
                    })
                })
            }
        }
    },
}
</script>
<style scoped>
    .cart{
        margin-top:.2rem;
        width:7.8rem;
        font-size: 0.16rem;
        border:2px solid #999;
        line-height: 3em;
        height:3em;
        overflow: hidden;
    }
    .cart span{
        overflow: hidden;
        display: inline-block;
        text-align: center
    }
    .name{
        width:1rem;
    }
    .phone{
        width:1rem;
    }
    .bj{
        margin-right:.1rem;
        cursor: pointer;
    }
    .bj:hover{
        color:red;
    }
    span.dress{
        margin-left: .2rem;
        text-align: left;
        width:3.5rem;
    }
    .cardel{
        cursor: pointer;
        margin-top:0.1rem;
        margin-right:40px;
        padding:15px;
        float:right;
        background:url("../../assets/img/icons/sprite2.png") 0 -55px;
    }
    .cardel:hover{
        background-position:-33px -54px;
    }
</style>
